<template>

    <Head @selectDate="selectDate"></Head>
    <div class="recordSport">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-button class="startRecord" type="primary" @click="startRecord">
                <i class="iconfont icon-24gf-playCircle"></i>
                <span>开始记录</span>
            </van-button>
            <div class="todaySportData">
                <div class="title">今天的运动记录</div>
                <ul class="sportCard">
                    <van-swipe-cell v-for="item in todaySportList ">
                        <li>
                            <div class="cardLeft">
                                <p>{{ item.sportType }}</p>
                                <span>{{ item.timeRange }}</span>
                            </div>
                            <div class="cardRight">
                                <p>{{ item.minute }}分钟</p>
                                <span>消耗{{ item.calorie }}卡路里</span>
                            </div>
                        </li>
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button"
                                @click="deleteData(item.id)" />
                        </template>
                    </van-swipe-cell>
                </ul>
            </div>
            <div class="sportInfo">
                <div class="sportInfoLeft">
                    <div class="title">本周运动次数</div>
                    <div class="data">{{ sportList.length }}次</div>
                </div>
                <div class="sportInfoRight">
                    <div class="title">本周消耗卡路里</div>
                    <div class="data">{{ sportList.reduce((pre, item) => {
                        return pre + item.calorie
                    }, 0) }}卡</div>
                </div>
            </div>
            <div class="lastWeek">
                <div class="title">最近一周运动情况</div>
                <div class="echarts" ref="echartsRef"></div>
            </div>
        </van-pull-refresh>
    </div>
    <PopSportData @writeData="writeData" ref="PopSportDataRef"></PopSportData>
</template>

<script setup>
import Head from '@/components/Head.vue'
import { ref, onMounted } from 'vue';
import { getSportData, deleteSportData, getSportColorie, writeSportData } from '@/api/index.js'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { showConfirmDialog } from 'vant';
import PopSportData from '@/components/PopSportData.vue'

echarts.use([GridComponent, BarChart, CanvasRenderer]);


const time = ref((new Date(new Date().setHours(8, 0, 0, 0)).getTime()).toString())
const sportList = ref([])
const echartsRef = ref('')
const loading = ref(false);
const PopSportDataRef = ref('')
const todaySportList = ref([])


onMounted(async () => {
    await getLastWeekData()
})

// 下拉刷新
const onRefresh = async () => {
    await getLastWeekData()
    showSuccessToast('刷新成功');
    loading.value = false;
};

// 请求本周的运动数据
const getLastWeekData = async () => {
    const res = await getSportData(time.value)
    sportList.value = res.data
    todaySportList.value = sportList.value.filter(item => {
        return item.create_time === time.value
    })
    // console.log(sportList.value, todaySportList.value);
    loadChart(sportList.value)
}

// 选择日期
const selectDate = async (type) => {
    time.value = (new Date(type.join('-')).getTime()).toString()
    await getLastWeekData()
    showSuccessToast('切换成功')
}

// 删除一条运动数据
const deleteData = (id) => {
    showConfirmDialog({
        message:
            '您确认要删除吗。',
    })
        .then(async () => {
            // console.log(id);
            const res = await deleteSportData(id)
            // console.log(res);
            showSuccessToast(res.msg)
            await getLastWeekData()
        })
        .catch(() => {
            // on cancel
        });
}

const startRecord = () => {
    PopSportDataRef.value.show = true
}

// 写入一条运动数据
const writeData = async (type) => {
    console.log(type);
    const calorie = await getSportColorie(type)
    // console.log(calorie.data);
    const res = await writeSportData({ timeRange: type.timeRange, minute: type.minute, sportType: type.sportType, calorie: Number(calorie.data), create_time: time.value })
    // console.log(res);
    showSuccessToast(res.msg)
    await getLastWeekData()
}

// echarts
const loadChart = (sportList) => {
    const myChart = echarts.init(echartsRef.value);
    const res = new Array(7).fill(0);
    sportList.forEach(item => {
        const index = (new Date(Number(item.create_time))).getDay()
        // console.log(index);
        if (index === 0) {
            res[6] += Number(item.minute)
        } else {
            res[index - 1] += Number(item.minute)
        }
    })
    // console.log(res);
    const option = {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
            type: 'value',
            name: "运动时长(分钟)",
            nameTextStyle: {
                align: "left"
            }
        },

        series: [
            {
                data: res,
                type: 'bar',
                color: ['#3176FF'],
            }
        ]
    };

    option && myChart.setOption(option);
}
</script>

<style lang="less" scoped>
.recordSport {
    padding: .64rem;
    box-sizing: border-box;
    height: calc(100vh - 2.5347rem);
    overflow: scroll;
    background: #F9FAFB;

    .startRecord {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 4.32rem;
        height: 1.6rem;
        margin: 0 2.1867rem;
        margin-top: .32rem;
        background-color: #3176FF;
        font-weight: 700;
        font-size: 0.48rem;
        color: #FFFFFF;
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
        border-radius: .1067rem;

        .iconfont {
            margin-right: 0.21rem;
        }
    }

    .todaySportData {
        padding: 0.64rem;
        margin-top: 0.85rem;
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
        border-radius: .32rem;
        background-color: #fff;

        .title {
            font-weight: 700;
            font-size: 0.48rem;
            color: #000000;
            line-height: 0.75rem;
        }

        .sportCard {

            li {
                margin-top: 16px;
                padding: .32rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #F9FAFB;
                border-radius: .32rem;

                .cardLeft {
                    p {
                        font-weight: 600;
                        font-size: 0.37rem;
                        color: #000000;
                        line-height: 0.53rem;
                    }

                    span {
                        font-weight: 400;
                        font-size: 0.32rem;
                        color: #6B7280;
                        line-height: 0.43rem;
                    }
                }

                .cardRight {
                    p {
                        text-align: right;
                        font-weight: 700;
                        font-size: 0.48rem;
                        color: #3176FF;
                        line-height: 0.75rem;
                    }

                    span {
                        font-weight: 400;
                        font-size: 0.37rem;
                        color: #4B5563;
                        line-height: 0.53rem;
                    }
                }
            }

            .van-swipe-cell__right {
                height: 72px;

                button {
                    height: 100%;
                }
            }
        }
    }

    .sportInfo {
        margin-top: 0.85rem;
        display: flex;
        background-color: #F9FAFB;

        .sportInfoLeft,
        .sportInfoRight {
            flex: 1;
            justify-content: space-between;
            box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
            border-radius: .32rem;
            padding: .4267rem;
            margin-right: 0.43rem;
            background-color: #fff;

            .title {
                font-weight: 700;
                font-size: 0.37rem;
                color: #000000;
                line-height: 0.53rem;
                margin-bottom: 0.21rem;
            }

            .data {
                font-weight: 700;
                font-size: 0.64rem;
                color: #3176FF;
                line-height: 0.85rem;
            }
        }

        .sportInfoRight {
            margin-right: 0.43rem;
        }
    }

    .lastWeek {
        padding: 0.43rem;
        margin-top: 0.85rem;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
        border-radius: .32rem;

        .title {
            font-weight: 700;
            font-size: 0.37rem;
            color: #000000;
            line-height: 0.53rem;
            margin-bottom: .2133rem;
        }

        .echarts {
            width: 100%;
            height: 8rem;
        }
    }
}
</style>